<template>
  <div style="height: calc(100vh - 150px);">
    <div class="left_bowuguan">
      <img class="img_left" src="../../assets/image/bjl.png" alt />
      <div class="content">
        <p class="new">舟山博物馆向公众免费开放。</p>
        <p class="new">开放时间&nbsp;:&nbsp;&nbsp;周二至周日9:&nbsp;00-17：&nbsp;00&nbsp;(</p>
        <p class="new">16:00停止入馆)&nbsp;,&nbsp;周一闭馆。</p>
        <div class="btn">
          <p @click="gerenyuyue">个人预约</p>
          <p @click="tuanduiyuyue">团队预约</p>
        </div>
      </div>
    </div>
    <div class="right_bowuguan">
      <img src="../../assets/image/bjr.png" class="img_right" alt />
      <ul class="yellow_bg">
        <li class="yellow_li" v-for="(item, index) of data1" :key="index">
          <div class="top">
            <div class="left">
              <div class="img_parent">
                <img src="../../assets/image/patten_tou.png" alt />
              </div>
              <p>{{ item.name }}</p>
            </div>
            <div class="right" style="  cursor: pointer;" @click="more(index + 1)">{{ item.more }}</div>
          </div>
          <div class="bottom" style="  cursor: pointer;">
            <p
              v-for="(item2, index2) of data1[index].content"
              :key="index2"
              @click="look(item2.id, index + 1,item)"
            >
              {{
              item2.title.length > 18
              ? item2.title.substr(0, 18) + "..."
              : item2.title
              }}
            </p>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import { JudgeLogin } from "../../api/login";
var url;
export default {
  name: "HelloWorld",
  data() {
    return {
      i: "",
      sort: 24,
      sortList: "xinwenzixun",
      data1: [
        { name: "新闻咨讯", more: "查看更多", content: [] },
        {
          name: "活动公告",
          more: "查看更多",
          content: [],
        },
        {
          name: "馆务公开",
          more: "查看更多",
          content: [],
        },
        {
          name: "文博动态",
          more: "查看更多",
          content: [],
        },
      ],
      // xwzx: [],
      // huodonggonggao: [],
      // guanwugongkai: []
    };
  },
  methods: {
    gerenyuyue() {
      JudgeLogin(this).then((res) => {
        if (res.code != "UnLogin" && res.email != "") {
          this.$router
            .push({
              path: `/gerenyuyue`,
            })
            .catch((err) => {
              err;
            });
        }
      });
    },
    tuanduiyuyue() {
      JudgeLogin(this).then((res) => {
        if (res.code != "UnLogin" && res.email != "") {
          this.$router
            .push({
              path: `/tuanduiyuyue`,
            })
            .catch((err) => {
              err;
            });
        }
      });
    },
    more(i) {
      if (i == 1) {
        this.sort = "xinwenzixun";
        this.orderId = "新闻资讯";
      } else if (i == 2) {
        this.sort = "huodonggonggao";
        this.orderId = "活动公告";
      } else if (i == 3) {
        this.sort = "guanwugongkai";
        this.orderId = "馆务公开";
      } else if (i == 4) {
        this.sort = "wenbodongtai";
        this.orderId = "文博动态";
      }
      this.$router
        .push({
          path: "/guanwugongkai/guanwugongkai2/:id",
          query: { orderId: this.orderId, zixun: this.sort },
        })
        .catch((err) => {
          err;
        });
    },

    look(id, index, item) {
      if (index == 1) {
        this.sort = 24;
        this.orderId = "新闻资讯";
      } else if (index == 2) {
        this.sort = 25;
        this.orderId = "活动公告";
      } else if (index == 3) {
        this.sort = 26;
        this.orderId = "馆务公开";
      } else if (index == 4) {
        this.sort = 45;
        this.orderId = "文博动态";
      }
      this.$router
        .push({
          path: `/guanwugongkai/guanwugongkai2detail?id=${id}`,
          query: {
            orderId: this.orderId,
            sort: this.sort,
          },
        })
        .catch((err) => {
          err;
        });
    },

    get() {
      if ((this.data1.id = 1)) {
        this.$api.get(`${this.tableList}xinwenzixun-1-5`).then((res) => {
          this.data1[0].content = res.data.page.list;
          this.data1[0].content = this.data1[0].content.slice(0, 4);
        });
      }
      if ((this.data1.id = 2)) {
        this.$api.get(`${this.tableList}huodonggonggao-1-5`).then((res) => {
          this.data1[1].content = res.data.page.list;
          this.data1[1].content = this.data1[1].content.slice(0, 4);
        });
      }
      if ((this.data1.id = 3)) {
        this.$api.get(`${this.tableList}guanwugongkai-1-5`).then((res) => {
          this.data1[2].content = res.data.page.list;
          this.data1[2].content = this.data1[2].content.slice(0, 4);
        });
      }
      if ((this.data1.id = 4)) {
        this.$api.get(`${this.tableList}wenbodongtai-1-5`).then((res) => {
          this.data1[3].content = res.data.page.list;
          this.data1[3].content = this.data1[3].content.slice(0, 4);
        });
      }
    },
  },
  props: ["id"],
  mounted() {
    this.get();
  },
};
</script>
<style scoped>
p,
ul,
li {
  padding: 0px;
  margin: 0px;
}
li {
  list-style: none;
}
.left_bowuguan {
  width: 48vw;
  margin-left: 2vw;
  height: 100%;
  float: left;
  display: inline;
  overflow: hidden;
  position: relative;
}
.img_left,
.img_right {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.new {
  padding-left: 25px;
}
.content {
  position: absolute;
  color: white;
  font-weight: bold;
  top: 50%;
  left: 50%;
  width: 565px;
  line-height: 60px;
  height: 313px;
  margin-left: -282px;
  margin-top: -161px;
  padding: 30px;
  box-sizing: border-box;
  font-size: 24px;
  background: url("../../assets/image/whitek.png") no-repeat;
}
.btn {
  display: flex;
  width: 100%;

  justify-content: space-evenly;
  margin-top: 10px;
}
.btn p {
  width: 120px;
  height: 40px;
  color: rgb(59, 89, 153);
  font-weight: normal;
  font-size: 20px;
  cursor: pointer;
  background: rgb(255, 241, 0);
  margin-right: 30px;
  border-radius: 2px;
  text-align: center;
  line-height: 40px;
}
/* 右边 */
.right_bowuguan {
  width: 50%;
  height: 100%;
  float: left;
  display: inline;
  overflow: hidden;
  position: relative;
  width: 48vw;
  margin-right: 2vw;
}

.yellow_bg {
  width: 800px;
  height: 80%;
  position: absolute;
  top: 0px;
  left: 0px;
  bottom: 0px;
  right: 0px;
  margin: auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-around;
  box-sizing: border-box;
}
.yellow_li {
  width: 49%;
  height: 49%;
  background: #103460;
  border: 1px solid black;
  padding: 15px;
  box-sizing: border-box;
  min-height: 250px;
}
.yellow_li .top {
  display: flex;
  width: 100%;
  height: 20%;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.yellow_li .top .left {
  display: flex;
  align-items: center;
}
.yellow_li .top .left img {
  margin-right: 10px;
}

.yellow_li .left p {
  color: white;
  font-size: 30px;
}
.yellow_li .right {
  color: white;
}
/* 底部文字 */
.yellow_li .bottom {
  height: 70%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.yellow_li .bottom p {
  font-size: 16px;
  color: white;

  height: 26px;

  padding-bottom: 5px;
}
.yellow_li .bottom p:not(:last-child) {
  border-bottom: 1px solid white;
}
@media only screen and (min-width: 10px) and (max-width: 1366px) {
  .yellow_li .top {
    width: 94%;
  }
  .yellow_bg {
    width: 700px;
  }
  .yellow_li .bottom {
    height: 80%;
  }
  .yellow_li {
    min-height: 207px;
  }
}
/* 个人预约 */
</style>
